import React from 'react';
import { EditOutlined, DeleteOutlined, SearchOutlined } from '@ant-design/icons';
import { Flex } from 'antd';
import MyButton from '../';

export default () => {
  return (
    <Flex vertical gap="middle">
      <Flex vertical gap="small">
        <div>按钮类型：</div>
        <Flex gap="small">
          <MyButton type="primary">主要按钮</MyButton>
          <MyButton >次按钮</MyButton>
          <MyButton danger type="primary" >危险按钮</MyButton>
          <MyButton danger  >危险按钮</MyButton>
          <MyButton type="text">文字按钮</MyButton>
         
          <MyButton type="link">链接按钮</MyButton>
        </Flex>
      </Flex>

      <Flex vertical gap="small">
        <div>图标按钮：</div>
        <Flex gap="small">
          <MyButton type="primary" icon={<EditOutlined />}>编辑</MyButton>
          <MyButton icon={<DeleteOutlined />}>删除</MyButton>
          <MyButton icon={<SearchOutlined />} />
        </Flex>
      </Flex>

      <Flex vertical gap="small">
        <div>按钮状态：</div>
        <Flex gap="small">
          <MyButton type="primary" disabled>禁用按钮</MyButton>
          <MyButton type="primary" loading>加载中</MyButton>
          <MyButton danger>危险按钮</MyButton>
        </Flex>
      </Flex>

      <Flex vertical gap="small">
        <div>按钮尺寸：</div>
        <Flex gap="small">
          <MyButton size="large">大按钮</MyButton>
          <MyButton>中按钮</MyButton>
          <MyButton size="small">小按钮</MyButton>
        </Flex>
      </Flex>
    </Flex>
  );
}; 